﻿<UserControl
    x:Class="Microsoft.PlayerFramework.CaptionSettings.Controls.CaptionSettingsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microsoft.PlayerFramework.CaptionSettings.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:model="using:Microsoft.PlayerFramework.CaptionSettings.Model"
    xmlns:ViewModel="using:Microsoft.PlayerFramework.CaptionSettings.ViewModel"
    xmlns:ValueConverters="using:Microsoft.PlayerFramework.CaptionSettings.ValueConverters"
    xmlns:Controls="using:Microsoft.PlayerFramework.CaptionSettings.Controls"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance ViewModel:CaptionSettingsFlyoutViewModel, IsDesignTimeCreatable=True}"  
    d:DesignHeight="768"
    d:DesignWidth="346">

    <UserControl.Resources>
        <ValueConverters:FontFamilyConverter x:Key="FontFamilyConverter"/>
        <ValueConverters:FontSizeConverter x:Key="FontSizeConverter" FontSize="30" />
        <ValueConverters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
        <ValueConverters:ColorTypeConverter x:Key="ColorTypeConverter"/>
        <ValueConverters:ResourceConverter x:Key="ResourceConverter"/>
        <ValueConverters:CapitalsConverter x:Key="CaptialsConverter"/>
        <Style x:Key="ColorButtonStyle" TargetType="Button">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform Y="3" X="4"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Margin" Value="10,0,0,0"/>
            <Setter Property="Width" Value="38"/>
            <Setter Property="Height" Value="38"/>
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="Content" Value="{x:Null}"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
        <Style x:Key="GroupTitleTextStyle" TargetType="TextBlock">
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Margin" Value="0,0,0,5"/>
            <Setter Property="FontFamily" Value="Segoe UI Semibold"/>
            <Setter Property="FontSize" Value="14.667"/>
        </Style>
        <Style x:Key="ColorGridStyle" TargetType="Grid">
            <Setter Property="Margin" Value="0,0,0,22"/>
        </Style>
        <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
        	<Setter Property="Margin" Value="0,0,0,24"/>
        </Style>
        <DataTemplate x:Key="ResourceTemplate">
            <TextBlock Text="{Binding Converter={StaticResource ResourceConverter}, Mode=OneWay}"/>
        </DataTemplate>
        <DataTemplate x:Key="ColorTypeTemplate">
            <TextBlock Text="{Binding Converter={StaticResource ColorTypeConverter}}"/>
        </DataTemplate>
        <Style x:Key="ColorSwatchBorderStyle" TargetType="Border">
            <Setter Property="Margin" Value="0,0,1,0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="DarkGray"/>
        </Style>
        <Style x:Key="HeaderStyle" TargetType="TextBlock">
        	<Setter Property="Margin" Value="0,0,0,4"/>
        	<Setter Property="FontFamily" Value="Segoe UI"/>
        	<Setter Property="FontSize" Value="14.667"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="stackPanel" Margin="0,0,40,0">
            <ToggleSwitch x:Name="EnableCaptionSettings" x:Uid="EnableCaptionSettings" 
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                          Margin="-6,0,0,0" IsOn="{Binding IsEnabled, Mode=TwoWay}">
                <ToggleSwitch.Header>
                    <TextBlock TextWrapping="Wrap" Text="Ignore default caption fonts and colors" x:Uid="EnableCaptionSettingsHeader"/>
                </ToggleSwitch.Header>
            </ToggleSwitch>
            <StackPanel x:Name="PreviewPanel" Orientation="Vertical">
                <TextBlock x:Uid="Preview" Text="Preview" Style="{StaticResource GroupTitleTextStyle}" Margin="0,0,0,10"/>
                <Controls:PreviewControl x:Name="Preview" 
                    Foreground="{Binding Settings.FontColor, Converter={StaticResource ColorToBrushConverter}, ConverterParameter=White}" 
                    CaptionBackground="{Binding Settings.BackgroundColor, Converter={StaticResource ColorToBrushConverter}}" 
                    WindowColor="{Binding Settings.WindowColor, Converter={StaticResource ColorToBrushConverter}}" 
                    FontSize="{Binding Settings.FontSize, Converter={StaticResource FontSizeConverter}}" OutlineWidth="1" 
                    CaptionFontStyle="{Binding Settings.FontStyle}" 
                    FontFamily="{Binding Settings.FontFamily, Converter={StaticResource FontFamilyConverter}}"
                    Typography.Capitals="{Binding Settings.FontFamily, Converter={StaticResource CaptialsConverter}}" 
                    PreviewText="Aaa Bbb Ccc Ddd"
                    Margin="0,0,0,10" Height="Auto" MaxHeight="100"/>
            </StackPanel>
            <TextBlock x:Name="Font" Text="Font" x:Uid="Font" Style="{StaticResource GroupTitleTextStyle}"/>
            <StackPanel Orientation="Vertical">
            	<TextBlock Text="Family" Style="{StaticResource HeaderStyle}"/>
            	<ComboBox x:Name="Family" x:Uid="Family"
            		ItemsSource="{Binding FontFamilies}"
            		SelectedItem="{Binding Settings.FontFamily, Mode=TwoWay}" Style="{StaticResource ComboBoxStyle}" 
            		IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}" ItemTemplate="{StaticResource ResourceTemplate}"/>
            </StackPanel>
            <TextBlock Text="Size (%)" Style="{StaticResource HeaderStyle}"/>
            <ComboBox x:Name="CaptionFontSize" x:Uid="Size" ItemsSource="{Binding FontSizes}"
                IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}"
                Style="{StaticResource ComboBoxStyle}" SelectedItem="{Binding Settings.FontSize, Converter={StaticResource FontSizeConverter}, Mode=TwoWay}"/>
            <TextBlock Text="Font Style" Style="{StaticResource HeaderStyle}"/>
            <ComboBox x:Name="CaptionFontStyle" ItemsSource="{Binding FontStyles}" 
                IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}"
                Style="{StaticResource ComboBoxStyle}" 
                SelectedItem="{Binding Settings.FontStyle}"
                SelectionChanged="OnFontStyleChanged"
                ItemTemplate="{StaticResource ResourceTemplate}" 
                        />
            <TextBlock x:Name="Color" Text="Color" x:Uid="Character" Style="{StaticResource GroupTitleTextStyle}"/>
            <TextBlock Text="Font" Style="{StaticResource HeaderStyle}"/>
            <Grid x:Name="FontColor" Style="{StaticResource ColorGridStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ComboBox x:Name="FontColorType" x:Uid="FontColor"
                    IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}"
                    ItemTemplate="{StaticResource ColorTypeTemplate}"
                    SelectedItem="{Binding FontColorType, Mode=TwoWay}"/>
                <Button x:Name="FontColorButton" Style="{StaticResource ColorButtonStyle}" 
                    IsEnabled="{Binding IsFontColorEnabled, Mode=OneWay}" Click="FontColorButton_Click"
                    >
                    <Border Style="{StaticResource ColorSwatchBorderStyle}">
                        <Grid Background="{Binding Settings.FontColor, Converter={StaticResource ColorToBrushConverter}}"/>
                    </Border>
                </Button>
            </Grid>
            <TextBlock Text="Background" Style="{StaticResource HeaderStyle}"/>
            <Grid x:Name="BackgroundColor" Style="{StaticResource ColorGridStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ComboBox x:Name="BackgroundColorType" x:Uid="BackgroundColor"
                    IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}" 
                    SelectedItem="{Binding BackgroundColorType, Mode=TwoWay}"                          
                          ItemTemplate="{StaticResource ColorTypeTemplate}"/>
                <Button x:Name="BackgroundColorButton" Style="{StaticResource ColorButtonStyle}" 
                    IsEnabled="{Binding IsBackgroundColorEnabled, Mode=OneWay}" Click="BackgroundColorButton_Click">
                    <Border Style="{StaticResource ColorSwatchBorderStyle}">
                        <Grid Background="{Binding Settings.BackgroundColor, Converter={StaticResource ColorToBrushConverter}}"/>
                    </Border>
                </Button>
            </Grid>
            <TextBlock Text="Window" Style="{StaticResource HeaderStyle}"/>
            <Grid x:Name="WindowColor" Style="{StaticResource ColorGridStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <ComboBox x:Name="WindowColorType" x:Uid="WindowColor" 
                    IsEnabled="{Binding IsOn, ElementName=EnableCaptionSettings}"
                    SelectedItem="{Binding WindowColorType, Mode=TwoWay}"
                    ItemTemplate="{StaticResource ColorTypeTemplate}"/>

                <Button x:Name="WindowColorButton" Style="{StaticResource ColorButtonStyle}" 
                    IsEnabled="{Binding IsWindowColorEnabled, Mode=OneWay}" Click="WindowColorButton_Click">
                    <Border Style="{StaticResource ColorSwatchBorderStyle}">
                        <Grid Background="{Binding Settings.WindowColor, Converter={StaticResource ColorToBrushConverter}}"/>
                    </Border>
                </Button>
            </Grid>
            <!--
            <TextBlock x:Name="LanguageGroup" Text="Language" TextWrapping="Wrap" x:Uid="Language" Style="{StaticResource GroupTitleTextStyle}" />
            <ComboBox x:Name="CaptionLanguage" Header="Caption Language" x:Uid="CaptionLanguage"
                ItemsSource="{Binding Languages}" 
                DisplayMemberPath="Name"
                SelectedValuePath="Code"
                SelectedValue="{Binding UserSettings.Language, Mode=TwoWay}"/>
            <ToggleSwitch x:Name="EasyReader" x:Uid="EasyReader" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Header="Easy Reader" Margin="-6,0,0,0" />
            -->
            <!--
            <TextBlock TextWrapping="Wrap" x:Uid="SaveCaptionOptions" Style="{StaticResource GroupTitleTextStyle}"  Text="Save Caption Options"/>
            <RadioButton x:Name="LocalSettings" x:Uid="LocalSettings" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,5" GroupName="SaveGroup" Content="Save settings for only this device."/>
            <RadioButton x:Name="RoamingSettings" x:Uid="RoamingSettings" HorizontalAlignment="Left" VerticalAlignment="Top" GroupName="SaveGroup" IsChecked="{Binding IsRoaming, Mode=TwoWay}" Content="Save settings on all my devices."/>
            -->
        </StackPanel>
    </Grid>
</UserControl>
